<html>

<head>
	<title>The Vision Tank of Raspberry Pi</title>
	<link rel="stylesheet" href='/static/css/style.css' />
	<script src="/static/js/jquery.min.js" type="text/javascript"></script>
	<script>
		function car_action(action) {
			$.ajax({
				type: 'GET',
				url: '/car_action',
				dataType: 'json',
				data: { 'action': action },
				success: function (res) {
					console.log(res)
				},
				error: function () {
					consle.log('error')
				}
			})
		}

		function ultrasonic_servo_action(action) {
			$.ajax({
				type: 'GET',
				url: '/ultrasonic_servo_action',
				dataType: 'json',
				data: { 'action': action },
				success: function (res) {
					console.log(res)
				},
				error: function () {
					consle.log('error')
				}
			})
		}


		function opencv_action(action) {
			$.ajax({
				type: 'GET',
				url: '/opencv_action',
				dataType: 'json',
				data: { 'action': action },
				success: function (res) {
					console.log(res)
				},
				error: function () {
					consle.log('error')
				}
			})
		}

       function laser_action(action) {
			$.ajax({
				type: 'GET',
				url: '/laser_action',
				dataType: 'json',
				data: { 'action': action },
				success: function (res) {
					console.log(res)
				},
				error: function () {
					consle.log('error')
				}
			})
		}

		const source = new EventSource("/data");
		source.onmessage = function (event) {
			const data = JSON.parse(event.data);
			console.log(data)
			$('#cur_distance').text(data.distance.toFixed(2));
			$('#cur_speed').text(data.speed.toFixed(2));
		}
	</script>
</head>

<body>
	<h1>The Vision Tank Using PiCamera</h1>
	<hr />
	<h2>The Vision Tank</h2>
	<hr />
	<!-- 
    FORWARD = 0
    BACK = 1
    STOP = 2
    LEFT = 3
    RIGHT = 4
-->
	<div class="btn_container">
		<button class="btn_circle" onclick="car_action(0)">前进</button>
	</div>
	<div class="btn_container">
		<button class="btn_circle" onclick="car_action(3)">左转</button>
		<button class="btn_circle" onclick="car_action(2)">停止</button>
		<button class="btn_circle" onclick="car_action(4)">右转</button>
	</div>
	<div class="btn_container">
		<button class="btn_circle" onclick="car_action(1)">后退</button>
	</div>
	<hr />
	<h2>Ultrasonic Servo</h2>
	<!-- 
    Ultrasonic_Servo_LEFT = 0
    Ultrasonic_Servo_RIGHT = 1
    Ultrasonic_Servo_CENTER = 2
 -->
	<div class="btn_container">
		<button class="btn_circle" onclick="ultrasonic_servo_action(0)">左转</button>
		<button class="btn_circle" onclick="ultrasonic_servo_action(1)">右转</button>
	</div>
	<div class="btn_container">
		<button class="btn_rectangle" onclick="ultrasonic_servo_action(2)">复位(居中)</button>
	</div>
	<div class="data_container">
		<h3>Distance(cm): <text id="cur_distance" style="color:blue;">{{cur_distance}}</text></h3>
		<h3>PID Speed: <text id="cur_speed" style="color:green;">{{cur_speed}}</text></h3>
	</div>
	<h2>Laser Shot</h2>
	<!-- 
    LASER_ON = 0
    LASER_OFF = 1
    -->
	<div class="btn_container">
		<button class="btn_circle" onclick="laser_action(0)">Shot</button>
		<button class="btn_circle" onclick="laser_action(1)">Off</button>
	</div>
	
	<h2>The Vision Action with OpenCV</h2>
	<!-- 
	OPENCV_NONE = 0
    OPENCV_OBJECT_FEATURE = 1
  -->
	<div class="btn_container">
		<button class="btn_rectangle" onclick="opencv_action(0)">基本信息</button>
		<button class="btn_rectangle" onclick="opencv_action(1)">特征识别</button>
	</div>

	<h2>Video Live Streaming</h2>
	<hr />
	<div class="video_container" id="car_video">
		<img src="{{ url_for('video_feed') }}" width="100%">
	</div>
</body>

</html>